<template>
  <!-- 
  vue2: v-model="data"（语法糖） = :value + @input
  vue3: 
  1. 默认（1个） v-model="data"（语法糖）= :modelValue + @update:modelValue => 父子通信
  2. 具名（多个） v-model:名字="data"（语法糖）= :名字 + @update:名字 => 父子通信=》替代vue2里修饰符sync
 -->
  <el-dialog v-model="show" v-model:show="show2"></el-dialog>
  <!-- 说明：$event子传父的值 -->
  <!-- <el-dialog :modelValue="show" @update:modelValue="show = $event"></el-dialog> -->
  <!-- <el-dialog v-model="show" :show="show2" @update:show="show2 = $event"></el-dialog> -->
  <p><button @click="show2 = true">打开弹层</button></p>
  <div>
    <!-- 测试cp-nav-bar组件封装 
    说明：unplugin-vue-components插件
    1. 可以自动注册vant组件
    2. 项目下components目录下的全局组件也会被自动注册=》文件名作为元素名
    -->
    <!-- <cp-nav-bar title="登录" right-text="右边👉" @click-right="cr"></cp-nav-bar> -->
    <div style="padding-top: 46px">
      <h1 class="title">test</h1>
      <p style="font-size: 20px; color: orange">注意：行内样式不能转换vw</p>
      <ul>
        <!-- <li>{{ store.user.token }}</li> -->
        <li>
          <button @click="changeUser">修改store数据</button>
        </li>
      </ul>
      <!-- 测试vant -->
      <div>
        <van-button square type="primary">方形按钮</van-button>
        <van-button round type="success">圆形按钮</van-button>
      </div>

      <!-- 测试axios封装 -->
      <div>
        <van-button type="primary" @click="getUserInfo">获取个人信息</van-button>
        <van-button type="primary" @click="login">登录</van-button>
      </div>
    </div>
    <!-- 测试svg图标使用 -->
    <div>
      <!-- 没有使用精灵图 -->
      <p>
        <img src="@/icons/consult/alipay.svg" alt="" />
      </p>
      <p style="font-size: 24px">
        <!-- == 使用精灵图 == -->
        <!-- <svg aria-hidden="true">
          <use href="#icon-home-docs" />
        </svg>
        <svg aria-hidden="true">
          <use href="#icon-login-eye-on" />
        </svg> -->
        <!-- 需求：封装组件，简化精灵图使用 -->
        <cp-icon name="home-docs"></cp-icon>
        <cp-icon name="login-eye-on"></cp-icon>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { useUserStore } from '@/stores/modules/user'
import { useUserStore } from '@/stores'
import { request } from '@/utils/request'
import type { User } from '@/types/login'
// 导入弹层
import ElDialog from './dialog.vue'
import { ref } from 'vue'

// 控制弹层显示
const show = ref(false)
const show2 = ref(false)

const cr = () => {
  console.log('点击了右边文字')
}

// 获取用户store
const store = useUserStore()
const changeUser = () => {
  store.setUser({
    token: Math.random() + ''
  })
}

// 测试，请求拦截器，是否携带token，响应拦截器401拦截到登录地址
const getUserInfo = async () => {
  const res = await request.get('/patient/myUser')
  console.log(res)
}

// 测试，响应拦截器，出现非10000的情况，和返回剥离后的数据
const login = async () => {
  const res = await request.post<any, User>('/login/password', {
    mobile: '13211112222',
    // 密码 abc12345 测试：出现非10000的情况
    password: 'abc12345'
  })
  console.log('登录成功：', res)
  store.setUser(res)
}
</script>

<style scoped>
.title {
  font-size: 28px;
  border: var(--meng-bd);
}
</style>
